<template>
  <a-modal
    title="工单明细信息列表"
    :visible="show"
    @cancel="handleCancel"
    width="70%"
    class="procedure-modal"
  >
    <template slot="footer">
      <a-button
        key="submit"
        type="primary"
        :loading="loading"
        @click="handleOk"
      >
        返回
      </a-button>
    </template>
    <a-table
      :columns="workUnitColums"
      :row-key="(record) => record.id"
      :data-source="procedureData"
      :scroll="{ y: 350 }"
      size="middle"
    >
    </a-table>
  </a-modal>
</template>

<script>
const workUnitColums = [
  {
    title: '配方明细序号',
    dataIndex: 'OrderDetailNo',
    align: 'center',
    sorter: true,
  },
  {
    title: '物料编码',
    dataIndex: 'MaterialCode',
    align: 'center',
  },
  {
    title: '物料名称',
    dataIndex: 'MaterialName',
    align: 'center',
    ellipsis: true,
    width: 200,
  },
  {
    title: '需求数量',
    dataIndex: 'ReqQty',
    align: 'center',
  },
  {
    title: '计量单位',
    dataIndex: 'ComUnitName',
    align: 'center',
  },
  {
    title: '创建人',
    dataIndex: 'CreateUser',
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'CreateDate',
    align: 'center',
  },
]
export default {
  props: { show: Boolean, procedureData: Array },
  data() {
    return {
      workUnitColums,
      loading: false,
      confirmLoading: false,
    }
  },
  methods: {
    //关闭弹窗
    handleCancel() {
      this.$emit('update:show', false)
    },
    //确认添加/修改
    handleOk() {
      this.$emit('update:show', false)
    },
    //表格选择
    handleTableChange() {},
  },
}
</script>

<style lang="less" scoped>
.procedure-modal {
  .title {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
  }
  .production-reporting {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .table-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
    }
    .center {
      display: flex;
      flex-direction: column;
      margin: 0 1.25rem;
    }
    .search {
      margin: 0.625rem 0;
    }
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
}
</style>
